<template>
  <div class="Intraweekalarmstatistics">
    <div class="tab">
      <div class="tab-group">
        <template v-for="(item, index) in tabList" :key="index">
          <div :class="['tab-item', currentActiveIndex == index ? 'active' : '']" @click="changeTab(item, index)">
            {{ item.title }}
          </div>
        </template>
      </div>
    </div>
    <base-echart ref="chartRef" :show-no-data="true" :options="state.Intraweekalarmstatistics"
      :height="props.cheight" />
  </div>
</template>

<script setup lang="ts">
import { Intraweekalarmstatistics } from "../../alert/components/config/config";
import {
  reactive,
  ref,
  computed,
  onMounted,
  nextTick,
  onUnmounted,
  defineProps,
} from "vue";
import { cloneDeep } from "lodash-es";

import { getGeneralValues } from "@/api/general";
import { useIds } from "@/stores/screen/ids";
import { getRenderDate } from "@/utils/tool";
const props = defineProps({
  cheight: {
    type: String,
    default: "240",
  },
});
const tabList = [
  {
    title: "日",
    class: "today",
  },
  {
    title: "周",
    class: "nowWeek",
  },
  {
    title: "月",
    class: "nowMonth",
  },
];
const currentActiveIndex = ref(0);
const { getsessionStorage } = useIds();
const state = reactive<any>({ Intraweekalarmstatistics });
const getWeeks = () => {
  const weekValueCode = [
    { code: "AI_ALERT_MESSAGE_DETAIL_LAST_7_WEEK_INFO", name: "一般" },
    { code: "AI_ALERT_MESSAGE_DETAIL_LAST_7_WEEK_WARN", name: "告警" },
    { code: "AI_ALERT_MESSAGE_DETAIL_LAST_7_WEEK_ERROR", name: "紧急" },
  ];
  let reqData = [];
  weekValueCode.forEach((item: any) => {
    reqData.push({
      code: item.code,
      params: { equipmentIds: getsessionStorage() },
    });
  });
  getGeneralValues(reqData).then((res) => {
    let infoData: [] =
      res.data["AI_ALERT_MESSAGE_DETAIL_LAST_7_WEEK_INFO"].data;
    let warnData: [] =
      res.data["AI_ALERT_MESSAGE_DETAIL_LAST_7_WEEK_WARN"].data;
    let errorData: [] =
      res.data["AI_ALERT_MESSAGE_DETAIL_LAST_7_WEEK_ERROR"].data;
    let infox = [];
    let warnx = [];
    let errorx = [];
    let infoy = [];
    let warny = [];
    let errory = [];
    infoData.forEach((item: any) => {
      infox.push("第" + item.x + "周");
      infoy.push(item.y);
    });
    warnData.forEach((item: any) => {
      warnx.push(item.x);
      warny.push(item.y);
    });
    errorData.forEach((item: any) => {
      errorx.push(item.x);
      errory.push(item.y);
    });
    formatOptions(infoy, warny, errory, infox);
  });
};
const getMonths = () => {
  const weekValueCode = [
    { code: "AI_ALERT_MESSAGE_DETAIL_LAST_7_MONTH_INFO", name: "一般" },
    { code: "AI_ALERT_MESSAGE_DETAIL_LAST_7_MONTH_WARN", name: "告警" },
    { code: "AI_ALERT_MESSAGE_DETAIL_LAST_7_MONTH_ERROR", name: "紧急" },
  ];
  let reqData = [];
  weekValueCode.forEach((item: any) => {
    reqData.push({
      code: item.code,
      params: { equipmentIds: getsessionStorage() },
    });
  });
  getGeneralValues(reqData).then((res) => {
    let infoData: [] =
      res.data["AI_ALERT_MESSAGE_DETAIL_LAST_7_MONTH_INFO"].data;
    let warnData: [] =
      res.data["AI_ALERT_MESSAGE_DETAIL_LAST_7_MONTH_WARN"].data;
    let errorData: [] =
      res.data["AI_ALERT_MESSAGE_DETAIL_LAST_7_MONTH_ERROR"].data;
    let infox = [];
    let warnx = [];
    let errorx = [];
    let infoy = [];
    let warny = [];
    let errory = [];
    infoData.forEach((item: any) => {
      infox.push(item.x + "月");
      infoy.push(item.y);
    });
    warnData.forEach((item: any) => {
      warnx.push(item.x);
      warny.push(item.y);
    });
    errorData.forEach((item: any) => {
      errorx.push(item.x);
      errory.push(item.y);
    });
    formatOptions(infoy, warny, errory, infox);
  });
};
const initDataOption = {
  // legend: { data: [] as any },
  series: [{ data: [] as any }, { data: [] as any }, { data: [] as any }],
  xAxis: [{ data: [] as any }],
};
const changeTab = (item: object, index: number) => {
  switch (index) {
    case 0:
      // getchartsData();
      const dates = getPastSevenDaysFormatted();
      formatOptions([10, 15, 12, 5, 16, 9, 5], [12, 9, 12, 15, 6, 10, 5], [4, 3, 2, 5, 6, 7, 10], dates)
      break;
    case 1:
      // getWeeks();
      formatOptions([2, 7, 6, 9], [5, 4, 6, 3], [4, 9, 2, 5], ['1~7周', '8~14周', '14~20周', '21~27周']);
      break;
    case 2:
      // getMonths();
      formatOptions([4, 9, 2, 5], [10, 15, 12, 5], [10, 13, 6, 9], ['1~3月', '4~6月', '7~9月', '10~12月']);
      break;
  }
  currentActiveIndex.value = index;
  //   initData();
};
const valueCode = [
  { code: "AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_INFO", name: "一般" },
  { code: "AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_WARN", name: "告警" },
  { code: "AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_ERROR", name: "紧急" },
];
const getchartsData = () => {
  let reqData = [];
  valueCode.forEach((item: any) => {
    reqData.push({
      code: item.code,
      params: { equipmentIds: getsessionStorage() },
    });
  });
  getGeneralValues(reqData).then((res) => {
    let resData = res.data;
    let s1 = resData["AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_INFO"]
      ? resData["AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_INFO"].data
      : [];
    let s2 = resData["AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_WARN"]
      ? resData["AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_WARN"].data
      : [];
    let s3 = resData["AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_ERROR"]
      ? resData["AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_ERROR"].data
      : [];
    // *

    let s1Value = [];
    let s2Value = [];
    let s3Value = [];
    const dates = getPastSevenDaysFormatted();

    s1Value = matchValuesByDate(dates, s1);

    s2Value = matchValuesByDate(dates, s2);

    s3Value = matchValuesByDate(dates, s3);

    formatOptions(s1Value, s2Value, s3Value, dates);
  });
};
const formatOptions = (s1Value: any, s2Value: any, s3Value: any, date: any) => {
  const dataOption = cloneDeep(initDataOption);

  dataOption.series[0].data = s1Value;
  dataOption.series[1].data = s2Value;
  dataOption.series[2].data = s3Value;
  dataOption.xAxis[0].data = date;

  nextTick(() => {
    state.Intraweekalarmstatistics = dataOption;
  });
};

const getPastSevenDaysFormatted = (): string[] => {
  const today = new Date();
  const pastSevenDays = [];

  for (let i = 0; i < 7; i++) {
    const day = new Date(today);
    day.setDate(today.getDate() - i);
    const formattedDate = `${(day.getMonth() + 1)
      .toString()
      .padStart(2, "0")}-${day
        .getDate()
        .toString()
        .padStart(2, "0")}`;
    pastSevenDays.unshift(formattedDate);
  }

  return pastSevenDays;
};
const replaceData = (data) => {
  let dataValue = "";
  dataValue = data.split("-")[1] + "-" + data.split("-")[2];
  return dataValue;
};
const matchValuesByDate = (dates: any, data: any) => {
  let result = [];

  for (let i = 0; i < dates.length; i++) {
    for (let j = 0; j < data.length; j++) {
      if (data[j] && replaceData(data[j].x) == dates[i]) {
        result.push(data[j].y);
      }
    }
    if (!result[i]) {
      result.push(0);
    }
    // if (found) {
    //   result.push(found.y);
    // } else {
    //   result.push(0);
    // }
  }

  return result;
};
const pollingTimer = ref();
const setPollingTimer = () => {
  pollingTimer.value && clearInterval(pollingTimer.value);
  pollingTimer.value = setInterval(() => {
    currentActiveIndex.value = 0;
    getchartsData();
  }, 30000);
};
onMounted(() => {
  // getchartsData();
  // setPollingTimer();
  const dates = getPastSevenDaysFormatted();
  formatOptions([10, 15, 12, 5, 16, 9, 5], [12, 9, 12, 15, 6, 10, 5], [4, 3, 2, 5, 6, 7, 10], dates)
});
onUnmounted(() => {
  // pollingTimer.value && clearInterval(pollingTimer.value);
});
</script>

<style scoped lang="scss">
.Intraweekalarmstatistics {
  position: relative;
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
  font-weight: 600;
}

.tab {
  position: absolute;
  width: 100%;
  height: clamp(1.563rem, 1.3vw, 3.125rem);
  top: 2%;
  z-index: 2;

  .tab-group {
    width: 100%;
    height: 100%;
    display: flex;

    .tab-item {
      width: clamp(2.5rem, 2.08vw, 5rem);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(136, 136, 136, 1);
      font-size: clamp(0.875rem, 0.73vw, 1.75rem);
      border: 1px solid rgba(136, 136, 136, 1);
      background-color: rgba(51, 51, 51, 0.6);
      cursor: pointer;
      white-space: nowrap;

      &:nth-child(1) {
        border-radius: 4px 0 0 4px;
      }

      &:nth-child(2) {
        border-left: 0;
        border-right: 0;
      }

      &:nth-child(3) {
        border-radius: 0 4px 4px 0;
      }

      &.active {
        border-color: rgba(15, 148, 250, 1);
        color: rgba(15, 148, 250, 1);
        background-color: rgba(5, 45, 77, 0.6);
        position: relative;

        &:nth-child(2)::after {
          content: "";
          position: absolute;
          width: 1px;
          height: 100%;
          background-color: rgba(15, 148, 250, 1);
          left: -1px;
          top: 0;
        }

        &:nth-child(2)::before {
          content: "";
          position: absolute;
          width: 1px;
          height: 100%;
          background-color: rgba(15, 148, 250, 1);
          right: -1px;
          top: 0;
        }
      }
    }
  }
}
</style>
